<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-31 10:00:52
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2023-10-13 15:33:11
 * @Description: 诉求意见
 * @FilePath: \tuanfeng-mini\src\pages\dispatch_form.vue
-->
<template>
    <div class="container">
        <u-form :model="form" ref="uForm" label-width="110px">
            <div class="item">
                <u-form-item label="姓名" prop="name" required :label-style="{ color: '#0c3b96' }">
                    <u-input v-model="form.name" placeholder="请输入诉求人姓名" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="手机号" prop="phone" required :label-style="{ color: '#0c3b96' }">
                    <u-input type="number" :maxlength="11" v-model="form.phone" placeholder="请输入诉求人手机号" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="邮箱" :label-style="{ color: '#0c3b96' }">
                    <u-input v-model="form.mail" placeholder="请输入诉求人邮箱" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="问题类型" prop="tid" required :label-style="{ color: '#0c3b96' }">
                    <u-input v-model="form.tid" type="select" @click="show = true" placeholder="请选择问题类型" />
                    <u-action-sheet :list="questionTypeList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="诉求标题" prop="title" required :label-style="{ color: '#0c3b96' }">
                    <u-input v-model="form.title" type="textarea" auto-height :maxlength="20" placeholder="请输入诉求标题" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="诉求内容" prop="content" required :label-style="{ color: '#0c3b96' }">
                    <u-input v-model="form.content" type="textarea" auto-height :maxlength="1000" placeholder="请输入诉求内容" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="是否公开" required :label-style="{ color: '#0c3b96' }">
                    <u-radio-group v-model="form.isOpen">
                        <u-radio shape="circle" :name="true" icon-size="30">是</u-radio>
                        <u-radio shape="circle" :name="false" icon-size="30">否</u-radio>
                    </u-radio-group>
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="是否乡镇'呼叫'" :label-style="{ color: '#0c3b96' }">
                    <u-radio-group v-model="form.isTownCall">
                        <u-radio shape="circle" :name="true" icon-size="30">是</u-radio>
                        <u-radio shape="circle" :name="false" icon-size="30">否</u-radio>
                    </u-radio-group>
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="附件" :label-style="{ color: '#0c3b96' }">
                    <div class="file-tips">上传图片不能超过20M，最多上传5个</div>
                    <div class="file-list">
                        <div class="file-item" v-for="(item, index) in fileList">
                            <img class="file-img" :src="item.type === 'image' ? item.url : 'https://tuanfeng.whkxzj.com/profile/static/20230109160415-file.png'" />
                            <div class="file-name">{{ item.name }}</div>
                            <img class="file-delete" src="https://tuanfeng.whkxzj.com/profile/static/20230109160503-delete.png" @click="remove(index)" />
                        </div>
                    </div>
                    <u-button v-if="fileList.length < 5" type="primary" size="mini" ripple @click="choose">上传图片</u-button>
                </u-form-item>
            </div>
        </u-form>
        <u-button class="btn" type="primary" ripple shape="circle" @click="submit">提交</u-button>
    </div>
</template>
<script>
import { addOrderAPI } from "../api/apanage";

export default {
    data() {
        return {
            openId: '',
            form: {
                tid: "",
                title: "",
                content: "",
                name: "",
                mail: "",
                phone: "",
                isOpen: true,
                isTownCall: undefined,
            },
            show: false,
            fileList: [
                // {
                //     name: "delete.png",
                //     type: "image",
                //     url: "",
                // },
            ],
            questionTypeList: [
                {
                    id: 1,
                    text: "咨询投诉",
                },
                {
                    id: 2,
                    text: "建议求助",
                },
            ],
            rules: {
                tid: [
                    {
                        required: true,
                        message: "请选择反馈问题类型",
                        trigger: ["change"],
                    },
                ],
                title: [
                    {
                        required: true,
                        message: "请输入诉求标题",
                        trigger: ["blur", "change"],
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入诉求内容",
                        trigger: ["blur", "change"],
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入诉求人姓名",
                        trigger: ["blur"],
                    },
                ],
                mail: [
                    {
                        required: true,
                        message: "请输入诉求人邮箱",
                        trigger: ["blur", "change"],
                    },
                    {
                        message: "请输入正确的邮箱格式",
                        trigger: ["blur", "change"],
                        validator(r, v) {
                            return v.indexOf("@") !== -1;
                        },
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入诉求人手机号",
                        trigger: ["blur"],
                    },
                    {
                        max: 11,
                        message: "请输入正确手机号",
                        trigger: ["blur", "change"],
                        validator(r, v) {
                            return v.length === 11;
                        },
                    },
                ],
            },
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        let { openId } = options;
        this.openId = openId;
    },
    methods: {
        // 点击actionSheet回调
        actionSheetCallback(index) {
            this.form.tid = this.questionTypeList[index].text;
        },
        submit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    let probType = this.questionTypeList.find((item) => item.text === this.form.tid) || {};
                    let probTypeCode = probType.id;
                    addOrderAPI({
                        ...this.form,
                        isTownCall: this.form.isTownCall ? true : false,
                        tid: probTypeCode,
                        openId: this.openId,
                        fileUrls: this.fileList.map((item) => item.url),
                    }).then((res) => {
                        wx.showToast({
                            title: "提交成功",
                            icon: "success",
                        });
                        setTimeout(() => {
                            this.$u.route({ type: "back" });
                        }, 1500);
                    });
                }
            });
        },
        remove(index) {
            this.fileList.splice(index, 1);
        },
        choose() {
            wx.chooseImage({
                count: 5 - this.fileList.length,
                type: "all",
                success: (res) => {
                    const tempFilePaths = res.tempFiles;
                    let requestList = [];

                    tempFilePaths.forEach((item, index) => {
                        let promise = new Promise((resolve, reject) => {
                            wx.uploadFile({
                                url: "https://tuanfeng.whkxzj.com/file/upload",
                                filePath: tempFilePaths[index].path, //本地地址
                                name: "file",
                                success: (res) => {
                                    resolve(res);
                                },
                                fail: (err) => {
                                    reject(err);
                                },
                            });
                        });
                        requestList.push(promise);
                    });

                    wx.showLoading({
                        title: "上传中...",
                    });
                    Promise.all(requestList)
                        .then((res) => {
                            res.forEach((item) => {
                                if (item.statusCode === 200) {
                                    let data = JSON.parse(item.data) || {};
                                    if (data.code === 200) {
                                        this.fileList.push(data.data);
                                    } else {
                                        throw new Error(JSON.stringify(item));
                                    }
                                } else {
                                    throw new Error(JSON.stringify(item));
                                }
                            });
                            wx.hideLoading();
                        })
                        .catch((err) => {
                            wx.showToast({
                                title: "上传错误",
                                icon: "error",
                            });
                        });
                },
            });
        },
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    position: relative;
    padding: 5px 20px;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 100px;
    .item {
        border-bottom: 1px solid #efefef;
        .file-tips {
            font-size: 12px;
            color: $color_secondary-text;
        }
        .file-list {
            .file-item {
                display: flex;
                align-items: center;
                margin: 10px 0;
                .file-img {
                    flex: none;
                    width: 50px;
                    height: 50px;
                    margin-right: 10px;
                }
                .file-name {
                    flex: auto;
                    font-size: 12px;
                    line-height: 20px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    word-break: break-all;
                }
                .file-delete {
                    flex: none;
                    width: 30px;
                    height: 30px;
                    margin-left: 10px;
                    opacity: 0.8;
                }
            }
        }
    }
    .btn {
        position: fixed;
        left: 30px;
        right: 30px;
        bottom: 30px;
        z-index: 10;
    }
}
</style>
